<template>
  <div class="exchange-rate-wrap table-gl-w">
    <TableWrap style="flex: 1" @refresh="getTableList">
      <template #headerLeft>
        <a-space>
          <a-month-picker v-model="month" style="width: 200px" @change="getTableList" :allow-clear="false" />
          <a-button type="primary" size="medium" @click="showSyncRateDialog = true">一键同步汇率</a-button>
          <a-button class="gray-outline" size="medium" @click="showLogDialog = true">操作日志</a-button>
        </a-space>
      </template>
      <template #tableBody>
        <a-table class="table-singe-line show-border-table" :loading="tableLoading" :scroll="{ y: '100%' }" :columns="columns" :data="tableList" size="mini" :pagination="false">
          <template #officialRateTitle>
            <a-popover>
              <template #content>
                <p style="width: 400px">官方汇率是兑人民币的汇率，取自中国银行外汇牌价的中行折算价，每天更新一次。（每天的汇率要存储，最少存储近1年每天的汇率数据）</p>
              </template>
              <p>
                <span>官方汇率</span>
                <icon-question-circle style="margin-left: 4px" />
              </p>
            </a-popover>
          </template>
          <template #localRateTitle>
            <a-popover>
              <template #content>
                <p style="width: 400px">本地系统每月1号自动同步官方汇率，使用一键同步汇率可以同步当前的官方汇率，点击可手动修改汇率</p>
              </template>
              <p>
                <span>本地汇率</span>
                <icon-question-circle style="margin-left: 4px" />
              </p>
            </a-popover>
          </template>
          <template #gmtWriteTitle>
            <a-popover content="这里的更新时间是指本地汇率更新的时间">
              <p>
                <span>更新时间</span>
                <icon-question-circle style="margin-left: 4px" />
              </p>
            </a-popover>
          </template>
          <template #officialRate="{ record }">
            <p class="highlight">{{ record.officialRate }}</p>
          </template>
          <template #localRate="{ record }">
            <div class="flex-c" style="width: 120px">
              <p class="highlight">{{ record.localRate }}</p>
              <icon-edit @click="openEditRate(record)" class="popup-edit-icon popup-edit-icon-hover" />
            </div>
          </template>
          <template #gmtWrite="{ record }">
            <p>{{ $setTime(record.gmtWriteLocal) }}</p>
          </template>
        </a-table>
      </template>
    </TableWrap>
  </div>
  <!-- 同步汇率 -->
  <SyncRate v-if="showSyncRateDialog" :is-show="showSyncRateDialog" :list="tableList" @closed="showSyncRateDialog = false" @success="getTableList" />
  <!-- 编辑汇率 -->
  <EditRate v-if="showEditRateDialog" :currentItem="currentItem" :is-show="showEditRateDialog" @closed="showEditRateDialog = false" @success="getTableList" />
  <!-- 操作日志 -->
  <CommonLogsDialog v-if="showLogDialog" api="findExchangeRateLogPage" :isShow="showLogDialog" @closed="showLogDialog = false" />
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import TableWrap from '@/components/TableWrap.vue'
  import SyncRate from './components/syncRate.vue'
  import EditRate from './components/editRate.vue'
  import { findExchangeRateList } from '@/api/system'
  import CommonLogsDialog from '@/components/Log/logsDialog.vue'
  import dayjs from 'dayjs'
  onMounted(async () => {
    getTableList()
  })
  const month = ref(dayjs().format('YYYY-MM'))

  const columns = [
    {
      title: '中文名称',
      dataIndex: 'currencyChName',
    },
    {
      title: '英文名称',
      dataIndex: 'currencyEnName',
    },
    {
      title: '货币代码',
      dataIndex: 'currency',
    },
    {
      title: '币种符号',
      dataIndex: 'currencySymbol',
    },
    {
      title: '数字代码',
      dataIndex: 'currencyNumber',
    },
    {
      title: '官方汇率',
      dataIndex: 'officialRate',
      slotName: 'officialRate',
      titleSlotName: 'officialRateTitle',
    },
    {
      title: '本地汇率',
      dataIndex: 'localRate',
      slotName: 'localRate',
      titleSlotName: 'localRateTitle',
    },
    {
      title: '更新时间',
      dataIndex: 'gmtWrite',
      slotName: 'gmtWrite',
      titleSlotName: 'gmtWriteTitle',
    },
  ]

  const tableLoading = ref(false)
  const showSyncRateDialog = ref(false)
  const showEditRateDialog = ref(false)
  const showLogDialog = ref(false)
  const tableList = ref<Array<any>>([])
  const currentItem = ref<any>({})

  //编辑汇率
  function openEditRate(row: any) {
    currentItem.value = row
    showEditRateDialog.value = true
  }
  // 获取商品列表
  async function getTableList() {
    tableLoading.value = true
    const res: any = await findExchangeRateList({
      gmtRate: month.value,
    })
    tableLoading.value = false
    tableList.value = res?.data || []
  }
</script>
<style lang="less" scoped></style>
